<template>
    <div>
        <div class="login_content">
            <div class="login_project_name_one">{{ systemName }}</div>
            <div class="login_project_name_two">({{ systemSubtitle }})</div>
            <el-card>
                <div class="login_content_title">用户登录</div>
                <div class="login_edit_input">
                    <el-input v-model="accountNumber" class="login_input" placeholder="用户名" @keydown.enter.native="onLoginIn"></el-input>
                </div>
                <div class="login_edit_input">
                    <el-input v-model="password" class="login_input" placeholder="密码" type="password" @keydown.enter.native="onLoginIn"></el-input>
                </div>
                <div class="login_edit_button">
                    <el-button class="button_login" v-loading.fullscreen.lock="loading" type="primary" @click="onLoginIn">登 录</el-button>
                    <el-button class="button_register" type="primary" @click="onRegister">注 册</el-button>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script>
export default {
    name: "login",
    data() {
        return {
            loading: false,
            systemName: CONFIG.systemName,
            systemSubtitle: CONFIG.systemSubtitle,

            accountNumber: '',
            password: '',
        }
    },
    methods: {
        onLoginIn() {
            if (this.accountNumber === '') {
                return this.$message.error('用户名不能为空')
            }
            if (this.password === '') {
                return this.$message.error('密码不能为空')
            }
            this.loading = true;
            this.$axios.post("/CHILD_SYSTEM/login/loginIn", {
                accountNumber: this.accountNumber,
                password: this.password,
            }).then(res => {
                let data = res.data;
                this.$root.setStorage('authorization', data.token || '');
                this.$root.setStorage('userId', data.id);
                this.$root.setStorage('niceName', data.niceName);
                this.$root.setStorage('userData', data);
                this.$router.replace('/home');
                this.loading = false;
            }).catch(() => {
                this.loading = false;
            })
        },
        onRegister() {
            this.$router.replace('/register');
        }
    }
}
</script>

<style lang="scss">
.login_content {
    position: relative;
    background-image: url("../common/img/login.jpg");
    width: 100%;
    height: calc(100vh);
    
    .login_project_name_one {
        width: 100%;
        height: 60px;
        line-height: 60px;
        font-size: 36px;
        text-align: center;
        position: absolute;
        top: 50%;
        margin-top: -300px;
    }
    
    .login_project_name_two {
        width: 100%;
        height: 60px;
        line-height: 60px;
        font-size: 20px;
        text-align: center;
        position: absolute;
        top: 50%;
        margin-top: -240px;
    }
    
    .el-card {
        width: 400px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -200px;
        margin-top: -140px;
        
        .login_content_title {
            height: 40px;
            line-height: 40px;
            font-size: 24px;
            text-align: center;
        }
        
        .login_edit_input {
            height: 40px;
            line-height: 40px;
            margin: 20px;
        }
        
        .login_edit_button {
            margin: 20px;
            
            .button_login {
                width: 140px;
                float: left;
            }

            .button_register {
                width: 140px;
                float: right;
            }
        }
    }
}
</style>